<template>
    <div>
        <div>
            <div style="display: flex;justify-content: space-between">
                <div>
                    <el-input v-model="empName"
                              clearable
                              @clear="getData"
                              @keydown.enter.native="getData"
                              placeholder="请输入员工名进行搜索。。。"
                              :disabled="showAdvanceSearchVisible"
                              prefix-icon="el-icon-search"
                              style="width: 300px;margin-right: 10px"></el-input>
                    <el-button icon="el-icon-search" type="primary" @click="getData"
                               :disabled="showAdvanceSearchVisible">搜索
                    </el-button>
                    <el-button type="primary" @click="showAdvanceSearchVisible = !showAdvanceSearchVisible">
                        <i :class="showAdvanceSearchVisible?'fa fa-angle-double-up':'fa fa-angle-double-down'"
                           aria-hidden="true"></i>高级搜索
                    </el-button>
                </div>
                <div>
                    <el-upload
                            style="display: inline-flex;margin-right: 8px"
                            :headers="headers"
                            :show-file-list="false"
                            :before-upload="beforeUpload"
                            :on-success="onSuccess"
                            :on-error="onError"
                            :disabled="importDataDisabled"
                            action="/employee/import">
                        <el-button type="success" :icon="importDataBtnIcon" :disabled="importDataDisabled">
                            {{importDataBtnText}}
                        </el-button>
                    </el-upload>
                    <el-button type="success" @click="exportData" icon="el-icon-download">
                        导出数据
                    </el-button>
                    <el-button type="primary" icon="el-icon-plus" @click="showAddEmp">添加员工</el-button>
                </div>
            </div>
        </div>
        <transition name="slide-fade">
            <div v-show="showAdvanceSearchVisible"
                 style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px">
                <el-row>
                    <el-col :span="6">
                        政治面貌：
                        <el-select v-model="searchValue.politicId" size="mini" style="width: 150px" placeholder="请选择">
                            <el-option
                                    v-for="item in politicsStatus"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        民族：
                        <el-select v-model="searchValue.nationId" size="mini" style="width: 150px" placeholder="请选择">
                            <el-option
                                    v-for="item in nations"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        籍贯：
                        <el-input v-model="searchValue.nativePlace" placeholder="请输入籍贯" prefix-icon="el-icon-edit"
                                  style="width: 150px" size="mini"></el-input>
                    </el-col>
                    <el-col :span="6">
                        婚姻状况：
                        <el-radio-group v-model="emp.wedlock">
                            <el-radio label="已婚">已婚</el-radio>
                            <el-radio label="未婚">未婚</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="6">
                        所属部门：
                        <el-popover
                                placement="bottom"
                                title="请选择部门"
                                width="200"
                                trigger="manual"
                                v-model="visible2">
                            <el-tree :data="allDeps"
                                     :props="defaultProps"
                                     default-expand-all
                                     @node-click="searchHandleNodeClick">
                            </el-tree>
                            <div slot="reference"
                                 style="width: 150px; height: 24px;display: inline-flex;border: 1px solid #dedede;border-radius: 5px;cursor: pointer;
align-items: center;font-size: 13px;padding-left: 8px;box-sizing: border-box"
                                 @click="showDepView2">
                                {{inputDepName}}
                            </div>
                        </el-popover>
                    </el-col>
                    <el-col :span="10">
                        入职日期：
                        <el-date-picker
                                v-model="searchValue.beginDateScope"
                                type="daterange"
                                size="mini"
                                value-format="yyyy-MM-dd"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="5" :offset="3">
                        <el-button size="mini">取消</el-button>
                        <el-button size="mini" type="primary" icon="el-icon-search" @click="getData('advanced')">搜索
                        </el-button>
                    </el-col>
                </el-row>
            </div>
        </transition>
        <div style="margin-top: 10px">
            <el-table
                    :data="emps"
                    border
                    stripe
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        fixed
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="gender"
                        label="性别"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="wedlock"
                        label="婚姻状况"
                        width="70">
                </el-table-column>
                <el-table-column
                        prop="nation.name"
                        label="民族"
                        width="70">
                </el-table-column>
                <el-table-column
                        prop="nativePlace"
                        label="籍贯"
                        width="70">
                </el-table-column>
                <el-table-column
                        prop="politic.name"
                        label="政治面貌"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话号码"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="department.name"
                        label="所属部门"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="beginDate"
                        label="入职时间"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="workID"
                        label="工号"
                        width="150">
                </el-table-column>
                <el-table-column
                        label="操作"
                        fixed="right"
                        width="230">
                    <template slot-scope="scope">
                        <el-button style="padding: 3px" @click="editEmpView(scope.row)">编辑</el-button>
                        <el-button style="padding: 3px" type="primary">查看高级资料</el-button>
                        <el-button style="padding: 3px" type="danger" @click="deleteDep(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="display: flex;justify-content: center">
            <el-pagination
                    background
                    layout="sizes, prev, pager, next, jumper, ->, total"
                    @current-change="currentChange"
                    @size-change="sizeChange"
                    :total="total">
            </el-pagination>
        </div>
        <el-dialog
                :title=title
                :visible.sync="dialogVisible"
                width="80%">
            <div>
                <el-form ref="empForm" :model="emp" :rules="rules">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="emp.name" placeholder="请输入员工姓名" size="mini" style="width: 150px"
                                          prefix-icon="el-icon-edit"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="性别" prop="gender">
                                <el-radio-group v-model="emp.gender" style="margin-top: 8px">
                                    <el-radio label="男">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="婚姻状况" prop="wedlock">
                                <el-radio-group v-model="emp.wedlock" style="margin-top: 8px">
                                    <el-radio label="已婚">已婚</el-radio>
                                    <el-radio label="未婚">未婚</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="政治面貌" prop="politicId">
                                <el-select v-model="emp.politicId" size="mini" style="width: 150px" placeholder="请选择">
                                    <el-option
                                            v-for="item in politicsStatus"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="民族" prop="nationId">
                                <el-select v-model="emp.nationId" size="mini" style="width: 150px" placeholder="请选择">
                                    <el-option
                                            v-for="item in nations"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="籍贯" prop="nativePlace">
                                <el-input v-model="emp.nativePlace" placeholder="请输入籍贯" prefix-icon="el-icon-edit"
                                          style="width: 120px" size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="手机号码" prop="phone">
                                <el-input v-model="emp.phone" placeholder="请输入手机号码" prefix-icon="el-icon-edit"
                                          style="width: 150px" size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="所属部门" prop="departmentId">
                                <el-popover
                                        placement="bottom"
                                        title="请选择部门"
                                        width="200"
                                        trigger="manual"
                                        v-model="visible">
                                    <el-tree :data="allDeps"
                                             :props="defaultProps"
                                             default-expand-all
                                             @node-click="handleNodeClick">
                                    </el-tree>
                                    <div slot="reference"
                                         style="width: 150px; height: 24px;display: inline-flex;border: 1px solid #dedede;border-radius: 5px;cursor: pointer;
align-items: center;font-size: 13px;padding-left: 8px;box-sizing: border-box"
                                         @click="showDepView">
                                        {{inputDepName}}
                                    </div>
                                </el-popover>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="入职日期" prop="beginDate">
                                <el-date-picker
                                        v-model="emp.beginDate"
                                        type="date"
                                        size="mini"
                                        style="width: 150px"
                                        value-format="yyyy-MM-dd"
                                        placeholder="入职日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="工号" prop="workID">
                                <el-input v-model="emp.workID" placeholder="请输入工号" prefix-icon="el-icon-edit"
                                          style="width: 120px" size="mini" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addEmp">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "EmpBasic",
        data() {
            return {
                searchValue: {
                    politicId: '',
                    nationId: '',
                    nativePlace: '',
                    wedlock: '',
                    departmentId: '',
                    beginDateScope: ''
                },
                allDeps: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                headers: {
                    Authorization: window.localStorage.getItem('tokenStr')
                },
                showAdvanceSearchVisible: false, // 高级搜索页面默认为关闭
                importDataDisabled: false,
                importDataBtnText: '导入数据',
                importDataBtnIcon: 'el-icon-upload2',
                title: '',
                inputDepName: '',
                visible: false,
                visible2: false,
                emps: [],
                loading: false,
                total: 0,
                currentPage: 1,
                size: 10,
                empName: '',
                dialogVisible: false,
                jobLevel: [],// 职称
                nations: [], // 民族
                politicsStatus: [], // 政治面貌
                position: [], // 职位
                emp: {
                    id: null,
                    beginDate: "",
                    departmentId: '',
                    gender: "",
                    jobLevelId: '',
                    name: "",
                    nationId: '',
                    nativePlace: "",
                    phone: "",
                    politicId: '',
                    wedlock: "",
                    workID: "",
                },
                rules: {
                    name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
                    gender: [{required: true, message: '请输入性别', trigger: 'blur'}],
                    wedlock: [{required: true, message: '请输入婚姻状态', trigger: 'blur'}],
                    politicId: [{required: true, message: '请输入政治面貌', trigger: 'blur'}],
                    nationId: [{required: true, message: '请输入民族', trigger: 'blur'}],
                    nativePlace: [{required: true, message: '请输入籍贯', trigger: 'blur'}],
                    phone: [{required: true, message: '请输入手机号码', trigger: 'blur'}],
                    // departmentId: [{required: true, message: '请输入所属部门', trigger: 'blur'}],

                }
            }
        },
        mounted() {
            this.getData();
            this.initData();
        },
        methods: {
            // 导入失败
            onError() {
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataBtnText = '导入数据';
                this.importDataDisabled = false;
            },
            // 导入成功
            onSuccess() {
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataBtnText = '导入数据';
                this.importDataDisabled = false;
                this.getData();
            },
            beforeUpload() {
                this.importDataBtnIcon = 'el-icon-loading';
                this.importDataBtnText = '正在导入';
                this.importDataDisabled = true;
            },
            // 导出数据
            exportData() {
                this.downloadRequest('/employee/export')
            },
            // 编辑员工，数据回显
            editEmpView(data) {
                this.dialogVisible = true;
                this.title = '编辑员工';
                this.inputDepName = data.department.name;
                this.emp = data;
            },
            // 删除员工
            deleteDep(data) {
                this.$confirm('此操作将永久删除[' + data.name + ']部门, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/employee/' + data.id).then(res => {
                        if (res) {
                            this.getData();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 添加员工
            addEmp() {
                if (this.emp.id) {
                    this.$refs['empForm'].validate(valid => {
                        if (valid) {
                            this.putRequest('/employee/updateDep', this.emp).then(res => {
                                if (res) {
                                    this.dialogVisible = false;
                                    this.getData();
                                }
                            })
                        }
                    })
                } else {
                    this.$refs['empForm'].validate(valid => {
                        if (valid) {
                            this.postRequest('/employee/addDep', this.emp).then(res => {
                                if (res) {
                                    this.dialogVisible = false;
                                    this.getData();
                                }
                            })
                        }
                    })
                }

            },
            searchHandleNodeClick(data) {
                this.inputDepName = data.name;
                this.searchValue.departmentId = data.id;
                this.visible2 = !this.visible2;
            },
            showDepView2() {
                this.visible2 = !this.visible2;
            },
            // 单击部门后树形控件关闭，并将部门name回显到div中
            handleNodeClick(data) {
                this.inputDepName = data.name;
                this.emps.departmentId = data.id;
                this.visible = !this.visible;
            },
            // 手动点击激活部门树形控件
            showDepView() {
                this.visible = !this.visible;
            },
            // 获取员工ID
            getWorkID() {
                this.getRequest('/employee/getWorkID').then(res => {
                    if (res) {
                        this.emp.workID = res.object;
                    }
                })
            },
            // 获取表单中职位，职称，民族，政治面貌下拉数据
            initData() {
                if (!window.localStorage.getItem('jobLevel')) {
                    this.getRequest('/employee/getAllJobLevel').then(res => {
                        if (res) {
                            this.jobLevel = res;
                            window.localStorage.setItem('jobLevel', JSON.stringify(res));
                        }
                    })
                } else {
                    this.jobLevel = JSON.parse(window.localStorage.getItem('jobLevel'));
                }
                if (!window.localStorage.getItem('nations')) {
                    this.getRequest('/employee/getAllNations').then(res => {
                        if (res) {
                            this.nations = res;
                            window.localStorage.setItem('nations', JSON.stringify(res));
                        }
                    })
                } else {
                    this.nations = JSON.parse(window.localStorage.getItem('nations'));
                }
                if (!window.localStorage.getItem('politicsStatus')) {
                    this.getRequest('/employee/getAllPoliticsStatus').then(res => {
                        if (res) {
                            this.politicsStatus = res;
                            window.localStorage.setItem('politicsStatus', JSON.stringify(res));
                        }
                    })
                } else {
                    this.politicsStatus = JSON.parse(window.localStorage.getItem('politicsStatus'));
                }
                if (!window.localStorage.getItem('position')) {
                    this.getRequest('/employee/getAllPosition').then(res => {
                        if (res) {
                            this.position = res;
                            window.localStorage.setItem('position', JSON.stringify(res));
                        }
                    })
                } else {
                    this.posiiton = JSON.parse(window.localStorage.getItem('position'));
                }
                if (!window.localStorage.getItem('allDeps')) {
                    this.getRequest('/employee/getAllDepartment').then(res => {
                        if (res) {
                            this.allDeps = res;
                            window.localStorage.setItem('allDeps', JSON.stringify(res));
                        }
                    })
                } else {
                    this.allDeps = JSON.parse(window.localStorage.getItem('allDeps'))
                }
            },
            sizeChange(size) {
                this.size = size;
                this.getData();
            },
            currentChange(currentPage) {
                this.currentPage = currentPage;
                this.getData();
            },
            // 点击弹出添加页面
            showAddEmp() {
                this.title = '添加员工';
                this.emp = {
                    id: null,
                    beginDate: "",
                    departmentId: '',
                    gender: "",
                    jobLevelId: '',
                    name: "",
                    nationId: '',
                    nativePlace: "",
                    phone: "",
                    politicId: '',
                    wedlock: "",
                    workID: "",
                },
                    this.inputDepName = ''
                this.getWorkID();
                this.dialogVisible = true
            },
            // 展示员工页面
            getData(type) {
                this.loading = true;
                let url = '/employee/?currentPage=' + this.currentPage + '&size=' + this.size;
                if (type && type == 'advanced') {
                    if (this.searchValue.politicId) {
                        url += '&politicId=' + this.searchValue.politicId;
                    }
                    if (this.searchValue.nationId) {
                        url += '&nationId=' + this.searchValue.nationId;
                    }
                    if (this.searchValue.nativePlace) {
                        url += '&nativePlace=' + this.searchValue.nativePlace;
                    }
                    if (this.searchValue.departmentId) {
                        url += '&departmentId=' + this.searchValue.departmentId;
                    }
                    if (this.searchValue.wedlock) {
                        url += '&wedlock=' + this.searchValue.wedlock;
                    }
                    if (this.searchValue.beginDateScope) {
                        url += '&beginDateScope=' + this.searchValue.beginDateScope;
                    }else {
                        url += '&name=' + this.empName
                    }
                }
                this.getRequest(url).then(res => {
                    this.loading = false;
                    if (res) {
                        this.total = res.total;
                        this.emps = res.data;
                    }
                })
            }
        }
    }
</script>

<style scoped>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(10px);
        opacity: 0;
    }
</style>
